var logo = document.getElementById('logo');
var logo2 = document.getElementById('logo2');
var detail = document.querySelector(".detail");
var title = document.getElementById("title");
var price = $("#price")[0]
var price2 = $("#current_price")[0]
var btn_goods = $("#btn_goods")
var user_id  = getCookie("userid");
var token = getCookie("token");
let login_tip = $(".login_tip")

window.onload = function (){
    loadUserMsg()
    .done(function(data){
        render(data)
    })
    
}
function loadUserMsg(){
    let options = {
        url : "http://127.0.0.1:8888/goods/item/"+getId(),
        method : "GET",
        dataType : "json"
  }
  return  $.ajax(options);
}
function getId(){
    return location.hash.split("=")[1];
}
function render( res ){
    logo.src = res.info.img_big_logo;
    detail.innerHTML = res.info.goods_introduce;
    title.innerHTML = res.info.title;
    logo2.src = res.info.img_big_logo;
    price.innerHTML = "￥"+res.info.price
    price2.innerHTML = "￥"+( parseInt( res.info.price)+10)
    btn_goods.attr("data",res.info.goods_id)
}


function Tip(msg, code) {
    if (code === 1) {
        var a = "alert-danger"
        var r = "alert-success"
    } else {
        var a = "alert-success"
        var r = "alert-danger"
    }
    login_tip[0].style.display = "block";
    login_tip[0].classList.remove(a);
    login_tip[0].classList.add(r);
    login_tip[0].innerHTML = msg;
    setTimeout(function () {
        login_tip[0].style.display = "none";
    }, 2000)
}

btn_goods.on("click",function(){
    load()
    .done(function(data){
        switch (data.code) {
            case 0:
                Tip(data.message, data.code)
                break;
            case 1:
                Tip(data.message, data.code)
                break;
        }
    })



})
function load() {
    var btn_val = btn_goods.attr("data")
    let options = {
          url : `http://127.0.0.1:8888/cart/add?id=${user_id}&goodsId=${btn_val}`,
          type : "POST",
          data: {
                id :user_id, 
                goodsId : btn_val
          },
          headers:{
            authorization: token
        },
          dataType : "json"
    }
    return  $.ajax(options);
}


console.log($(".small-img")[0].offsetTop); 
console.log($(".container")[0].offsetTop);

class Fangdajing {
    constructor() {
        this.container_ele = document.querySelector(".container")
        this.small_img_ele = document.querySelector(".small-img")
        this.big_img_ele = document.querySelector(".big-img")
        this.focus_ele = document.querySelector(".focus")
        this.big_pic = document.querySelector(".big-img img")
        this.small_pic = document.querySelector(".small-img img")
        this.container_left = {
            left: this.container_ele.offsetLeft
        }
        this.focus_size = {
            width: parseInt(getComputedStyle(this.focus_ele).width),
            height: parseInt(getComputedStyle(this.focus_ele).height)
        }
    }
    bindEvent() {
        var mag = this
        this.small_img_ele.addEventListener("mouseover", function () {
            mag.toggle("block")
        })
        this.small_img_ele.addEventListener("mouseout", function () {
            mag.toggle("none")
        })
        this.small_img_ele.addEventListener("mousemove", function (event) {
            var client_x = event.clientX
            var client_y = event.clientY
            mag.focusMove(client_x, client_y)
        })
    }
    focusMove(x, y) {
        if (x < 339) {
            x = 339
        }
        if (x > 489) {
            x = 489
        }
        if (y < 286) {
            y = 286
        }
        if (y > 436) {
            y = 436
        }
        this.focus_ele.style.left = x  - this.focus_size.width / 2 -189+ "px"
        this.focus_ele.style.top = y - this.focus_size.height / 2 -136+ "px"
        this.big_pic.style.top = -(y - this.focus_size.height / 2-136) /3*5+"px"
        this.big_pic.style.left = -(x - this.focus_size.width / 2-189) /3*5 +"px"
    }
    toggle(type) {
        switch (type) {
            case "block":
                this.focus_ele.style.display = "block";
                this.big_img_ele.style.display = "block"
                break;
            case "none":
                this.focus_ele.style.display = "none"
                this.big_img_ele.style.display = "none"
        }
    }
}
var m = new Fangdajing
m.bindEvent()